<template>
  <div class="text-result" v-if="resultText.length > 0">
    <p v-for="(txt, idx) in resultText" :key="`txt_${idx}`">{{txt}}</p>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'

@Component
export default class TextResult extends Vue {
  @Prop({ default: [] })
  resultText?: string[]
}
</script>

<style scoped lang="less">
.text-result {
  font-family: PingFangSC-Regular,sans-serif;
  min-height: 14.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow: column;
  p:first-child {
    font-size: 2rem;
    color: #323333;
  }
  p:not(:first-child) {
    font-size: 0.88rem;
    color: #929292;
    line-height: 1.5rem;
    font-weight: 400;
  }
}
</style>
